<template>
    <el-card class="box-card" style="position: absolute; left: 10%; top: 26%; width: 450px; height: 350px; opacity: 0.8">
        <el-tabs :tab-position="'left'" style="height: 350px" stretch="true">
            <el-tab-pane label="车票">
                <el-tabs :tab-position="'top'" style="height: 350px" stretch="true">
                    <el-tab-pane label="单程">
                        <el-form :model="formData" label-width="80px">
                            <el-form-item label="出发地">
                                <el-input v-model="formData.fromnm" placeholder="简拼/全拼/汉字" />
                            </el-form-item>
                            <el-form-item label="到达地">
                                <el-input v-model="formData.tonm" placeholder="简拼/全拼/汉字" />
                            </el-form-item>

                            <el-form-item label="出发日期">
                                <el-date-picker v-model="formData.date" type="date" :disabledDate="disabledDateFn" />
                            </el-form-item>

                            <el-form-item>
                                <el-checkbox-group v-model="formData.type">
                                    <el-checkbox label="学生" name="type" />
                                    <el-checkbox label="高铁/动车" name="type" />
                                </el-checkbox-group>
                            </el-form-item>
                            <el-button type="primary" @click="Query"
                                style="width: 290px; background-color: orange; position: relative; left: 10px">查询</el-button>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="往返">往返</el-tab-pane>
                    <el-tab-pane label="中转换乘">中转换乘
                        <!-- <el-form :model="formData" label-width="80px">
                            <el-form-item label="出发地">
                                <el-input v-model="formData.start" placeholder="简拼/全拼/汉字" />
                            </el-form-item>
                            <el-form-item label="到达地">
                                <el-input v-model="formData.arrive" placeholder="简拼/全拼/汉字" />
                            </el-form-item>

                            <el-form-item label="乘车日期">
                                <el-date-picker v-model="formData.date" type="date" :disabledDate="disabledDateFn" />
                            </el-form-item>

                            <el-form-item>
                                <el-checkbox-group v-model="formData.type">
                                    <el-checkbox label="学生" name="type" />                                
                                </el-checkbox-group>
                            </el-form-item>
                            <el-button type="primary" @click="Query"
                                style="width: 290px; background-color: orange; position: relative; left: 10px">查询</el-button>
                        </el-form> -->

                    </el-tab-pane>
                    <el-tab-pane label="退改签">退改签</el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="常用查询">常用查询</el-tab-pane>
            <el-tab-pane label="订餐">订餐</el-tab-pane>
        </el-tabs>
    </el-card>
</template>


<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useQueryStore } from '../../stores/query'
//引入storeToRefs
import { storeToRefs } from 'pinia'

//实例化对象
const queryStore = useQueryStore()
//解构
const { formData } = storeToRefs(queryStore)

let router = useRouter();

queryStore.getCurrentDate();

let disabledDateFn = (time) => {
    return time.getTime() < Date.now() - 24 * 3600 * 1000 || time.getTime() > Date.now() + 14 * 24 * 3600 * 1000;
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}


async function Query() {

    queryStore.query();


    
    
    await sleep(50);
    router.push("/buy");


}



</script>
